<template>
  <Tabs class="container" value="list">
    <Tab-pane label="分类列表" name="list">
      <div class="tool-wrap">
        <Button-group class="rf">
          <!--<i-button type="ghost" icon="refresh" class="tool-btn" @click="expand()">全部展开</i-button>-->
          <i-button type="ghost" icon="plus" class="tool-btn" @click="showModal(null, {id: 0, parent_path: ''})">
            增加顶级分类
          </i-button>
          <i-button type="ghost" icon="trash-a" class="tool-btn" @click="deleteCategoryList">批量删除用户</i-button>
        </Button-group>
      </div>
      <zk-table
        ref="categoryTable"
        :data="categoryList"
        :columns="columns"
        :is-fold="isFold"
        :tree-type="true">
        <template slot="opt" scope="scope">
          <div class="option-column">
            <Tooltip content="添加子分类" placement="top" :transfer="true">
              <Button type="text" icon="plus" @click="showModal(null, scope.row)"></Button>
            </Tooltip>
            <Tooltip content="编辑" placement="top" :transfer="true">
              <Button type="text" icon="edit" @click="showModal(scope.row)"></Button>
            </Tooltip>
            <Tooltip content="删除" placement="top" :transfer="true">
              <Button type="text" icon="trash-a" @click="deleteCategory(scope.row)"></Button>
            </Tooltip>
          </div>
        </template>
      </zk-table>
    </Tab-pane>
    <Modal
      class-name="vertical-center-modal"
      v-model="modal.show"
      :title="modal.title">
      <Form ref="modalForm" :model="modal.formData" :rules="modal.rules" :label-width="100">
        <Form-item label="分类名称" prop="name">
          <i-input v-model="modal.formData.name" placeholder="请输入分类名称"></i-input>
        </Form-item>
        <Form-item label="分类描述" prop="describe">
          <i-input v-model="modal.formData.describe" placeholder="请输入分类名称"></i-input>
        </Form-item>
      </Form>
      <div slot="footer" class="cf modal-footer">
        <i-button class="rf" :loading="modal.loading" type="primary" @click="saveCategory()">保存</i-button>
        <i-button class="rf" @click="closeModal()" style="margin-right: 30px;">取消</i-button>
      </div>
    </Modal>
  </Tabs>
</template>
<script type="text/ecmascript-6">
  import categoryApi from '../../../api/admin/category'
  const emptyData = {
    id: 0,
    name: '',
    describe: '',
    parent_id: 0,
    parent_path: ''
  }
  export default{
    components: {},
    props: [],
    data () {
      return {
        isFold: true,
        categoryList: [],
        columns: [
          {
            label: '类名',
            prop: 'name'
          },
          {
            label: '描述',
            prop: 'describe'
          },
          {
            label: '操作',
            type: 'template',
            template: 'opt'
          }
        ],
        modal: {
          show: false,
          loading: false,
          title: '增加分类',
          formData: {
            ...emptyData
          },
          rules: {
            name: [
              {required: true, message: '请输入分类名', trigger: 'blur'},
              {type: 'string', max: 60, message: '最多输入60字符', trigger: 'blur'}
            ],
            describe: [
              {type: 'string', max: 200, message: '最多输入200字符', trigger: 'blur'}
            ]
          }
        }
      }
    },
    methods: {
      expand () {
        this.isFold = true
      },
      showModal (data, parent) {
        const self = this
        self.modal.formData = {...emptyData}
        let formData = self.modal.formData
        if (parent) {
          formData.parent_id = parent.id
          formData.parent_path = parent.parent_path + '/' + parent.id
        }
        if (data) {
          Object.assign(formData, data)
        }
        self.modal.show = true
      },
      closeModal () {
        this.modal.show = false
      },
      getCategoryTree () {
        const self = this
        categoryApi.getCategoryTree(data => {
          self.categoryList = data
        })
      },
      saveCategory () {
        const self = this
        self.modal.loading = true
        self.$refs.modalForm.validate(valid => {
          if (!valid) {
            self.modal.loading = false
            return
          }
          categoryApi.saveCategory(self.modal.formData, res => {
            self.getCategoryTree()
            self.$Message.success('保存成功')
            self.modal.loading = false
            self.modal.show = false
          }, () => {
            self.modal.loading = false
          })
        })
      },
      deleteCategoryList () {
        const self = this
        let ids = self.$refs.categoryTable.getCheckedProp('id')
        if (ids.length === 0) {
          self.$Message.warning('请选择分类')
          return
        }
        categoryApi.deleteCategoryList(ids, res => {
          this.getCategoryTree()
        })
      },
      deleteCategory (row) {
        categoryApi.deleteCategory(row.id, res => {
          this.getCategoryTree()
        })
      }
    },
    created () {
      this.getCategoryTree()
    }
  }
</script>
<style lang="less">
</style>
